<template>
  <div class="II-III-II">
    <table class="II-III-II__table">
      <tr class="II-III-II__table-trone">
        <td class="II-III-II__table-trone-td"
            colspan="7">
          <div class="II-III-II__table-trone-td-title">
            II-3-2 重大仪器设备1
            <span class="II-III-II__table-trone-td-title-tips">
              （限 5 项）
            </span>
          </div>
        </td>
      </tr>
      <tr class="II-III-II__table-th">
        <td class="II-III-II__table-th-tdone">
          序号
        </td>
        <td class="II-III-II__table-th-tdtwo">
          仪器设备名<br>称与型号
        </td>
        <td class="II-III-II__table-th-tdthree">
          生产厂家<br>（国别）
        </td>
        <td class="II-III-II__table-th-tdfour">
          价值
        </td>
        <td class="II-III-II__table-th-tdfive">
          建账<br>时间
        </td>
        <td class="II-III-II__table-th-tdsix">
          参与学<br>科情况
        </td>
        <td class="II-III-II__table-th-tdseven">
          对本学科人才培养、科学研究和社<br>会服务的支撑作用
          <span class="II-III-II__table-th-tdseven-tips">
            （限 100 字）
          </span>
        </td>
        <el-button type="success"
                   size="small"
                   icon="el-icon-plus"
                   class="II-III-II__table-th-add-button"
                   circle
                   @click.prevent="addMaterList"/>
      </tr>
      <tr v-for="(item, index) in bcbs"
          :key="index"
          class="II-III-II__table-tr">
        <td class="II-III-II__table-tr-tdone">
          {{ index + 1 }}
        </td>
        <td class="II-III-II__table-tr-tdtwo">
          <el-input v-model="item.equipNameModel"
                    class="II-III-II__table-tr-tdtwo-input"
                    autosize
                    placeholder="XXXXX"
                    :maxlength="100"
                    type="textarea"/>
        </td>
        <td class="II-III-II__table-tr-tdthree">
          <el-input v-model="item.manuFacturer"
                    class="II-III-II__table-tr-tdthree-input"
                    autosize
                    :maxlength="50"
                    placeholder="XXXX(美国)"
                    type="textarea"/>
        </td>
        <td class="II-III-II__table-tr-tdfour">
          <el-input v-model="item.value"
                    class="II-III-II__table-tr-tdfour-input"
                    type="textarea"
                    autosize
                    placeholder="100"
                    oninput="if(isNaN(value)) { value = null } if(value.indexOf('.')>0){value=value.slice(0,value.indexOf('.')+2)}"/>
        </td>
        <td class="II-III-II__table-tr-tdfive">
          <el-input v-model="item.establishTime"
                    class="II-III-II__table-tr-tdfive-input"
                    placeholder="200605"
                    :maxlength="6"
                    type="input"/>
        </td>
        <td class="II-III-II__table-tr-tdsix">
          <el-input v-model="item.partScienceInfo"
                    class="II-III-II__table-tr-tdsix-input"
                    placeholder="1(100%)"
                    :maxlength="10"
                    autosize
                    type="textarea"/>
        </td>
        <td class="II-III-II__table-tr-tdseven">
          <el-input v-model="item.effect"
                    type="textarea"
                    :autosize="{ minRows:2 }"
                    maxlength="100"
                    class="II-III-II__table-tr-tdseven-textarea"/>
        </td>
        <el-button type="danger"
                   size="small"
                   icon="el-icon-delete"
                   class="II-III-II__table-tr-delete-button"
                   circle
                   @click.prevent="deleteMaterItem(index)"/>
      </tr>
    </table>
    <div class="II-III-II__explain">
      <span class="II-III-II__explain-strong">
        说明：①
      </span>
      本表填写2020年12月31日前本单位购置或研制，目前仍在投入使用的5项单台（套）价值最高的仪器设备与实验装置。
      <span class="II-III-II__explain-strong">
        ②
      </span>
      对于高校自行研制的重大仪器设备，“价值”按照同类型设备的市场价值进行估算，并在“生产厂家”栏中填写“自行研制”。
      <span class="II-III-II__explain-strong">
        ③
      </span>
      “建账时间”填写固定资产登记时间。
      <span class="II-III-II__explain-strong">
        ④
      </span>
      “对本学科人才培养、科学研究和社会服务的支撑作用”中应包含仪器设备供学生使用情况。
    </div>
  </div>
</template>

<script>
import { getPageData } from '@/utils/getData.js'

export default {
  watch: {
    bcbs: {
      handler (newVal) {
        sessionStorage['this_data'] = JSON.stringify(newVal)
      },
      deep: true,
      immediate: true
    }
  },
  async mounted () {
    const loading = this.$loading({ lock: true, text: '数据获取中...请稍后！', background: 'rgba(0, 0, 0, 0.7)' })
    this.bcbs = await getPageData('bcbs')
    loading.close()
  },
  data () {
    return {
      bcbs: [
        { equipNameModel: '', manuFacturer: '', value: '', establishTime: '', partScienceInfo: '', effect: '' }
      ]
    }
  },
  methods: {
    addMaterList () {
      if (this.bcbs.length < 5) {
        this.bcbs.push({ equipNameModel: '', manuFacturer: '', value: '', establishTime: '', partScienceInfo: '', effect: '' })
      } else {
        Element.toast('最多五个！！！')
      }
    },
    deleteMaterItem (index) {
      if (this.bcbs.length > 1) {
        this.bcbs.splice(index, 1)
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../assets/css/page/2-3-2.less';
</style>
